// 大屏动画效果工具

/**
 * 数字滚动动画
 * @param {HTMLElement} element 目标元素
 * @param {number} start 起始值
 * @param {number} end 结束值
 * @param {number} duration 动画时长(ms)
 * @param {Function} callback 动画完成回调
 */
export const animateNumber = (element, start, end, duration = 2000, callback) => {
  const startTime = Date.now()
  const range = end - start

  const step = () => {
    const elapsed = Date.now() - startTime
    const progress = Math.min(elapsed / duration, 1)
    
    // 使用easeOutQuart缓动函数
    const easeProgress = 1 - Math.pow(1 - progress, 4)
    const current = Math.floor(start + range * easeProgress)
    
    if (element) {
      element.textContent = current.toLocaleString()
    }
    
    if (progress < 1) {
      requestAnimationFrame(step)
    } else if (callback) {
      callback()
    }
  }
  
  requestAnimationFrame(step)
}

/**
 * 渐入动画
 * @param {HTMLElement} element 目标元素
 * @param {number} duration 动画时长(ms)
 * @param {number} delay 延迟时间(ms)
 */
export const fadeIn = (element, duration = 1000, delay = 0) => {
  if (!element) return

  element.style.opacity = '0'
  element.style.transform = 'translateY(20px)'
  element.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`
  
  setTimeout(() => {
    element.style.opacity = '1'
    element.style.transform = 'translateY(0)'
  }, delay)
}

/**
 * 脉冲动画
 * @param {HTMLElement} element 目标元素
 * @param {number} duration 动画时长(ms)
 */
export const pulse = (element, duration = 2000) => {
  if (!element) return

  element.style.animation = `pulse ${duration}ms infinite`
}

/**
 * 闪烁动画
 * @param {HTMLElement} element 目标元素
 * @param {number} duration 动画时长(ms)
 */
export const blink = (element, duration = 1000) => {
  if (!element) return

  element.style.animation = `blink ${duration}ms infinite`
}

/**
 * 添加CSS动画样式
 */
export const addAnimationStyles = () => {
  const style = document.createElement('style')
  style.textContent = `
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0.3; }
    }
    
    @keyframes slideInUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    @keyframes slideInLeft {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    @keyframes fadeInScale {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    .animate-slide-up {
      animation: slideInUp 0.8s ease-out;
    }
    
    .animate-slide-left {
      animation: slideInLeft 0.8s ease-out;
    }
    
    .animate-slide-right {
      animation: slideInRight 0.8s ease-out;
    }
    
    .animate-fade-scale {
      animation: fadeInScale 1s ease-out;
    }
  `
  document.head.appendChild(style)
}

/**
 * 延迟执行动画
 * @param {Function} animationFn 动画函数
 * @param {number} delay 延迟时间(ms)
 */
export const delayAnimation = (animationFn, delay = 0) => {
  setTimeout(animationFn, delay)
}

/**
 * 批量执行动画
 * @param {Array} animations 动画配置数组
 */
export const batchAnimations = (animations) => {
  animations.forEach((config, index) => {
    const { element, type, delay = index * 200, ...options } = config
    
    delayAnimation(() => {
      switch (type) {
        case 'fadeIn':
          fadeIn(element, options.duration, 0)
          break
        case 'pulse':
          pulse(element, options.duration)
          break
        case 'blink':
          blink(element, options.duration)
          break
        default:
          console.warn(`Unknown animation type: ${type}`)
      }
    }, delay)
  })
}
